<template>
  <div class="ultraviolet_box">
    <div class="ultraviolet_box1">
      <div class="Box1_1">{{ultravioletName}}</div>
      <div class="Box1_2" :class="zaixianZhuantai==0?'lixian':'zaixian'"></div>
      <div class="Box1_3" @click="addClose"></div>
    </div>
    <div class="ultraviolet_box2">
      <div class="Box2_1" :class="xiaoduClassName(xiaoduZhuantai)">
        <span></span>
      </div>
      <div class="Box2_2">
        <div class="Box2_2Item">
          <div class="Box2_2ItemLeft">上一次消毒开始：</div>
          <div class="Box2_2ItemRight">{{kaisjiesObj.kaishi}}</div>
        </div>
        <div class="Box2_2Item">
          <div class="Box2_2ItemLeft">上一次消毒结束：</div>
          <div class="Box2_2ItemRight">{{kaisjiesObj.jieshu}}</div>
        </div>
        <div class="Box2_2Item">
          <div class="Box2_2ItemLeft">上一次时长：</div>
          <div class="Box2_2ItemRight">100分钟</div>
        </div>
        <div class="Box2_2Item">
          <div class="Box2_2ItemLeft">灯管累计使用：</div>
          <div class="Box2_2ItemRight">100分钟</div>
        </div>
      </div>
    </div>
    <div class="ultraviolet_box3">
      <div class="Box3_1" v-if="xiaoduZhuantai == 0">
        <div class="title">启动时间</div>
        <div class="anniuBox">
          <div class="anniuItem" :class="qidongshijianObj.kaishiTime == 0?'':'anniuItemAct'" @click="addKaishi(0)">立即开启
          </div>
          <div class="anniuItem" :class="qidongshijianObj.kaishiTime == 1?'':'anniuItemAct'" @click="addKaishi(1)">延后1分钟
          </div>
          <div class="anniuItem" :class="qidongshijianObj.kaishiTime == 3?'':'anniuItemAct'" @click="addKaishi(3)">延后3分钟
          </div>
          <div class="anniuItemAct">自定义</div>
        </div>
      </div>
      <div class="Box3_1" v-if="xiaoduZhuantai == 0">
        <div class="title">结束时间</div>
        <div class="anniuBox">
          <div class="anniuItem" :class="qidongshijianObj.jieshuTime == 0?'':'anniuItemAct'" @click="addJieshu(0)">不设置
          </div>
          <div class="anniuItem" :class="qidongshijianObj.jieshuTime == 30?'':'anniuItemAct'" @click="addJieshu(30)">
            消毒30分钟</div>
          <div class="anniuItem" :class="qidongshijianObj.jieshuTime == 60?'':'anniuItemAct'" @click="addJieshu(60)">
            消毒60分钟</div>
          <div class="anniuItemAct">自定义</div>
        </div>
      </div>
      <div class="Box3_1" v-if="xiaoduZhuantai == 1">
        <div class="title">结束时间</div>
        <div class="anniuBox">
          <div class="anniuItem" :class="guanbiDeng == 0?'':'anniuItemAct'" @click="jieshule(0)">立即结束
          </div>
          <div class="anniuItem" :class="guanbiDeng == 60?'':'anniuItemAct'" @click="jieshule(60)">
            延后1分钟</div>
          <div class="anniuItem" :class="guanbiDeng == 180?'':'anniuItemAct'" @click="jieshule(180)">
            延后3分钟</div>
          <div class="anniuItemAct">自定义</div>
        </div>
      </div>
    </div>

    <div class="ultraviolet_box4" v-if="xiaoduZhuantai == 1">
      {{rtnGuanbiTime(kaisjiesObj.jieshu)}}
    </div>
    <div class="ultraviolet_box5" v-if="xiaoduZhuantai == 0">
      <div class="Box5_left" @click="addQueren"></div>
      <div class="Box5_right" @click="addQvXiao"></div>
    </div>
    <div class="ultraviolet_box5" v-if="xiaoduZhuantai == 1">
      <div class="Box5_left" @click="addjieshuqueren"></div>
      <div class="Box5_right" @click="addQvXiao"></div>
    </div>
  </div>
</template>
<script setup>
  import { ref, onMounted, watch } from "vue"
  import { postqueryStatusDbapi, postschedulesApi, postschedulesissueapi, postscheduleAddapi, postControlapi, postdevicesshowapi } from "@/api/index.js"
  import dayjs from "dayjs"
  import { ElMessage } from "element-plus"
  const emit = defineEmits("CloseUltraviolet")
  const addClose = () => {
    emit("CloseUltraviolet")
  }
  const props = defineProps({
    ziwaixianObj: {
      type: Object,
      default: true
    }
  })
  const rtnGuanbiTime = (e) => {
    let aaa = ""
    if (e == '0:0') {
      aaa = '不关闭'
    } else {
      aaa = '将于' + e + '关闭'
    }
    return aaa
  }
  const ultravioletName = ref("")
  const zaixianZhuantai = ref(0)
  const xiaoduZhuantai = ref(null)
  const kaisjiesObj = ref({
    kaishi: '',
    jieshu: ''
  })
  const xiaoduClassName = (zhuangtai) => {
    let name = ""
    if (zhuangtai == 0) {
      name = 'meixiaodu'
    } else if (zhuangtai == 1) {
      name = 'xiaodu'
    } else {
      name = 'meixiaodu'
    }
    return name
  }
  const init = async (data) => {
    // ultravioletName.value = data?.DeviceName
    if (data.DirectId == "") {
      zaixianZhuantai.value = 0
      return
    } else {
      let xiangqingObj = {
        directDid: data.DirectId,
        did: data.Did,
        siid: data.Siid,
      }
      const xiangqing = await postdevicesshowapi(xiangqingObj)
      console.log(xiangqing,'阿桑的歌华盛顿国会大概是个俺是个的后果就');
      
      ultravioletName.value = xiangqing.data.data.data[0].roomName + '-' + xiangqing.data.data.data[0].name
      // console.log(ultravioletName.value, '名称');

      // 紫外线弹窗获取当前紫外线灯离线在线状态
      let huoqvzhuangtaiOBJ = {
        directDid: data.DirectId,
        did: data.Did,
        siid: 0,
        fiids: [32840, 8450, 16485]
      }
      // console.log(huoqvzhuangtaiOBJ, "紫外线弹窗获取当前紫外线灯开关状态")
      const res = await postqueryStatusDbapi(huoqvzhuangtaiOBJ)
      // console.log(res.data.data.data.params.fiids[0].value.online, '获取紫外线灯状态  0是不在线,1是在线')
      zaixianZhuantai.value = res?.data?.data?.data?.params?.fiids[0]?.value?.online

      // 紫外线弹窗获取当前紫外线消毒状态
      let tijiaoOBJ = {
        directDid: data.DirectId,
        did: data.Did,
        siid: data.Siid,
        fiids: [49408]
      }
      const res1 = await postqueryStatusDbapi(tijiaoOBJ)
      console.log(res1.data.data.data.params.fiids[0].value.onOff
        , '获取紫外线灯消毒状态0是关闭1是开启');
      xiaoduZhuantai.value = res1.data.data.data.params.fiids[0].value.onOff

      // 查询紫外线定时任务
      let dingsiObj = {
        directDid: data.DirectId,
        did: data.Did,
        siid: data.Siid,
      }
      const res2 = await postschedulesApi(dingsiObj)
      console.log(res2.data.data.data, '查询紫外线定时任务');
      let length = res2.data.data.data.length - 1
      kaisjiesObj.value.kaishi = res2.data.data?.data[length].startHour + ':' + res2.data.data?.data[length].startMin
      kaisjiesObj.value.jieshu = res2.data.data?.data[length].endHour + ':' + res2.data.data?.data[length].endMin
      // console.log(kaisjiesObj.value, '我干了啥');
    }
  }

  // 打开弹窗直接先存起来当前弹窗的
  const keyIdsObj = ref({
    Did: '',
    DirectId: '',
    Siid: '',
    isShow: false
  })
  const qidongshijianObj = ref({
    kaishiTime: 0,//单位是分钟0代表立即开始
    jieshuTime: 0,//单位是分钟,表示从开始时间往后退这个数字的时间
  })
  const addKaishi = (e) => {
    console.log('点击了', e);
    qidongshijianObj.value.kaishiTime = e
  }
  const addJieshu = (e) => {
    console.log('点击了', e);
    qidongshijianObj.value.jieshuTime = e
  }
  const addQvXiao = () => {
    addClose()
  }
  const addQueren = async () => {
    // let dangqianTime = dayjs().format('HH:mm:ss')   // 当前时间
    let qidong = dayjs().add(qidongshijianObj.value.kaishiTime, 'minute').format('HH:mm:ss')  // 启动时间
    // console.log(qidong, '启动时间');
    let jieshu = dayjs(qidong, 'HH:mm:ss').add(qidongshijianObj.value.jieshuTime, 'minute').format('HH:mm:ss')
    // console.log(jieshu, '结束时间');
    let kaishixiaoshi = dayjs(qidong, 'HH:mm:ss').hour()
    let kaishifenzhong = dayjs(qidong, 'HH:mm:ss').minute()
    // console.log(kaishixiaoshi, kaishifenzhong, '处理');
    if (qidongshijianObj.value.jieshuTime != 0) {
      let ziwaixianyvyueObj = {
        directDid: keyIdsObj.value.DirectId,
        did: keyIdsObj.value.Did,
        siid: keyIdsObj.value.Siid,
        startHour: dayjs(qidong, 'HH:mm:ss').hour(),//开始小时
        startMin: dayjs(qidong, 'HH:mm:ss').minute(),//开始分钟
        endHour: dayjs(jieshu, 'HH:mm:ss').hour(),//结束小时
        endMin: dayjs(jieshu, 'HH:mm:ss').minute(),//结束分钟
        isRepeat: 0//是否循环默认0否
      }
      console.log(ziwaixianyvyueObj)
      const res = await postscheduleAddapi(ziwaixianyvyueObj)  // 创建紫外定时任务
      console.log(res, '创建紫外定时任务');
      if (res.data.code == 200) {
        const chuangjian = await postschedulesissueapi(ziwaixianyvyueObj)  //下发定时任务
        console.log(chuangjian, '下发紫外线定时任务');
        if (chuangjian.data.code == 200 && chuangjian.data.data.messsage == "下发成功") {
          // messsage
          ElMessage({
            message: chuangjian.data.data.messsage,
            type: 'success'
          })
          addClose()
        } else {
          ElMessage({
            message: chuangjian.data.data.messsage,
            type: 'error'
          })
        }
      }

    } else {
      let ziwaixianyvyueObj = {
        directDid: keyIdsObj.value.DirectId,
        did: keyIdsObj.value.Did,
        siid: keyIdsObj.value.Siid,
        startHour: dayjs(qidong, 'HH:mm:ss').hour(),//开始小时
        startMin: dayjs(qidong, 'HH:mm:ss').minute(),//开始分钟
        endHour: 0,//结束小时
        endMin: 0,//结束分钟
        isRepeat: 0//是否循环默认0否
      }
      console.log(ziwaixianyvyueObj)
      const res = await postscheduleAddapi(ziwaixianyvyueObj)  // 创建紫外定时任务
      console.log(res, '创建紫外定时任务');
      if (res.data.code == 200) {
        const chuangjian = await postschedulesissueapi(ziwaixianyvyueObj)  //下发定时任务
        console.log(chuangjian, '下发紫外线定时任务');
        if (chuangjian.data.code == 200 && chuangjian.data.data.messsage == "下发成功") {
          // messsage
          ElMessage({
            message: chuangjian.data.data.messsage,
            type: 'success'
          })
          addClose()
        } else {
          ElMessage({
            message: chuangjian.data.data.messsage,
            type: 'error'
          })
        }
      }
    }
  }
  const guanbiDeng = ref(0)
  const jieshule = (e) => {
    guanbiDeng.value = e
  }
  const addjieshuqueren = async () => {
    let TijiaoList = {
      directDid: keyIdsObj.value.DirectId,
      did: keyIdsObj.value.Did,
      siid: keyIdsObj.value.Siid,
      fiids: [
        {
          fiid: "49408",
          value: {
            "onOff": 0
          }
        },
        {
          fiid: "33040",
          value: {
            delayTime: guanbiDeng.value * 1000
          }
        }
      ]
    }
    // console.log(TijiaoList);
    const res = await postControlapi(TijiaoList)
    // console.log(res);
    if (res.data.code == 200) {
      ElMessage({
        message: res.data.data.messsage,
        type: 'success'
      })
      addClose()
    } else {
      ElMessage({
        message: res.data.data.messsage,
        type: 'error'
      })
    }
  }
  watch(
    () => props.ziwaixianObj,
    (val) => {
      console.log(13022222222222222222, val, '子组件监听到了紫外线灯的状态');
      if (!keyIdsObj.value.isShow) {
        keyIdsObj.value.isShow = true
        keyIdsObj.value.DirectId = val.DirectId
        keyIdsObj.value.Siid = val.Siid
        keyIdsObj.value.Did = val.Did
        console.log(13022222222222, '现在可以存储', keyIdsObj.value);
      }
      if (
        keyIdsObj.value.DirectId == val.DirectId &&
        keyIdsObj.value.Siid == val.Siid &&
        keyIdsObj.value.Did == val.Did &&
        keyIdsObj.value.isShow
      ) {
        console.log(130222222, "id相同可以走接口")
        init(val)
      } else {
        console.log(130222222, "id不相同")
      }

    },
    {
      deep: true,
      immediate: true
    }
  )
</script>
<style scoped lang="less">
  .ultraviolet_box {
    width: 100%;
    height: 100%;
    background: url("@/assets/ultraviolet/ditu.png") no-repeat center;
    background-size: 100% 100%;
    position: relative;

    .ultraviolet_box1 {
      position: absolute;
      top: 30px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 92%;
      height: 60px;
      display: flex;
      align-items: center;

      .Box1_1 {
        font-size: 42px;
        margin-left: 80px;
        background: linear-gradient(180deg, #fff 0%, #bef2ff 100%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: 600;
      }

      .Box1_2 {
        position: absolute;
        width: 182px;
        height: 60px;
        right: 100px;
      }

      .zaixian {
        background: url("@/assets/ultraviolet/zaixian.png") no-repeat center;
        background-size: 100% 100%;
      }

      .lixian {
        background: url("@/assets/ultraviolet/lixian.png") no-repeat center;
        background-size: 100% 100%;
      }

      .Box1_3 {
        cursor: pointer;
        position: absolute;
        width: 88px;
        height: 88px;
        right: 0px;
        background: url("@/assets/PatientInformation/xhao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }

    .ultraviolet_box2 {
      position: absolute;
      top: 170px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 92%;
      height: 380px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .Box2_1 {
        width: 240px;
        height: 380px;
        text-align: center;
        background-color: pink;
        padding-top: 320px;

        span {
          font-size: 36px;
          font-weight: 600;
          color: #693ad6;
        }
      }

      .xiaodu {
        background: url("@/assets/ultraviolet/xiaodu.png") no-repeat center;
        background-size: 100% 100%;
      }

      .meixiaodu {
        background: url("@/assets/ultraviolet/meixiaodu.png") no-repeat center;
        background-size: 100% 100%;
      }

      .Box2_2 {
        width: 726px;
        height: 380px;
        display: flex;
        flex-wrap: wrap;
        align-items: top;

        .Box2_2Item {
          width: 100%;
          height: 60px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size: 42px;

          .Box2_2ItemLeft {
            width: 50%;
            color: #666666;
          }

          .Box2_2ItemRight {
            width: 50%;
            color: #000000;
          }
        }
      }
    }

    .ultraviolet_box3 {
      position: absolute;
      top: 650px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 92%;
      height: 420px;
      // display: flex;
      align-items: center;
      justify-content: space-between;

      .Box3_1 {
        margin-bottom: 44px;
        width: 100%;
        height: 166px;
        position: relative;

        .title {
          position: absolute;
          font-weight: 600;
          font-size: 42px;
          color: #000000;
        }

        .anniuBox {
          position: absolute;
          top: 80px;
          width: 100%;
          height: 82px;
          display: flex;
          justify-content: space-between;

          .anniuItem {
            cursor: pointer;
            width: 250px;
            height: 82px;
            background: url("@/assets/ultraviolet/Group1.png") no-repeat center;
            background-size: 100% 100%;
            text-align: center;
            line-height: 82px;
            color: #fff;
            font-size: 28px;
          }

          .anniuItemAct {
            cursor: pointer;
            width: 250px;
            height: 82px;
            background: url("@/assets/ultraviolet/Group2.png") no-repeat center;
            background-size: 100% 100%;
            text-align: center;
            line-height: 82px;
            color: #693ad6;
            font-size: 28px;
          }
        }
      }
    }

    .ultraviolet_box4 {
      position: absolute;
      top: 1070px;
      left: 50%;
      transform: translate(-50%, 0);
      width: 92%;
      height: 50px;
      align-items: center;
      justify-content: space-between;
      font-size: 42px;
      color: #626366;
    }

    .ultraviolet_box5 {
      position: absolute;
      width: 92%;
      height: 120px;
      top: 1150px;
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      justify-content: space-between;

      .Box5_left {
        cursor: pointer;
        width: 514px;
        height: 120px;
        background: url("@/assets/ultraviolet/queren.png") no-repeat center;
        background-size: 100% 100%;
      }

      .Box5_right {
        cursor: pointer;
        width: 514px;
        height: 120px;
        background: url("@/assets/ultraviolet/qvxiao.png") no-repeat center;
        background-size: 100% 100%;
      }
    }
  }
</style>